import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Picker, List, WingBlank } from 'weaver-mobile';
import ScrollSelect from '../../../public/scrollselect'
const getLabel = Tools.getLabel;
const monthdata = {
  1: getLabel(25825, '1月'),
  2: getLabel(25826, '2月'),
  3: getLabel(25827, '3月'),
  4: getLabel(25828, '4月'),
  5: getLabel(25829, '5月'),
  6: getLabel(25830, '6月'),
  7: getLabel(25831, '7月'),
  8: getLabel(25832, '8月'),
  9: getLabel(25833, '9月'),
  10: getLabel(25834, '10月'),
  11: getLabel(25835, '11月'),
  12: getLabel(25836, '12月')
};
const seasondata = {
  1: getLabel(509092, '1季度'),
  2: getLabel(509093, '2季度'),
  3: getLabel(509094, '3季度'),
  4: getLabel(509095, '4季度')
};
@withRouter
class GoalLinkage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      period: [
        { label: getLabel(332, '全部'), value: "0" },
        { label: getLabel(19398, '月度'), value: "1" },
        { label: getLabel(17495, '季度'), value: "2" },
        { label: getLabel(17138, '年度'), value: "3" },
        { label: getLabel(390757, '三年'), value: "4" },
        { label: getLabel(390758, '五年'), value: "5" },
      ]
      ,
      status: [
        {
          label: getLabel(332, '全部'),
          value: "0"
        },
        {
          label: getLabel(1960, '进行中'),
          value: "1"
        },
        {
          label: getLabel(23774, '已完成'),
          value: "2"
        },
        {
          label: getLabel(1981, '已撤销'),
          value: "3"
        }
      ],
      quarter: this.initValue("quarter"),
      month: this.initValue("month"),
      whiteWidth: "36%",  //空白宽度
      isShow: {
        year: true,     //年度是否显示
        month: false,     //月度是否显示
        quarter: false,    //季度是否显示 
      },
      currentValue: {  //当前值
        // period:"3",  //周期
        // quarter:this.getCurrentDate("quarter"), //季度
        // year:this.getCurrentDate("year"),    //年份
        // month:this.getCurrentDate("month"),   //月份
        // status:"1",  //状态
      },
    }
  }

  componentWillMount() {
    let { nowyear, nowmonth, nowseason, currentperiod, currentstatus, currentOrgId} = this.props;
    let params = {};
    params.period = currentperiod == "" ? "3" : currentperiod;
    params.quarter = nowseason == "" ? this.getCurrentDate("quarter") : nowseason;
    params.year = nowyear == "" ? this.getCurrentDate("year") : nowyear;
    params.month = nowmonth == "" ? this.getCurrentDate("month") : nowmonth;
    params.status = currentstatus == "" ? "1" : currentstatus;
    params.currentOrgId = currentOrgId;
    this.setState({ currentValue: params })


  }

  componentWillReceiveProps(newProps) {
    if (this.props.locationKey != newProps.locationKey) {
      let { nowyear, nowmonth, nowseason, currentperiod, currentstatus,currentOrgId } = newProps;
      let params = {};
      params.period = currentperiod == "" ? "3" : currentperiod;
      params.quarter = nowseason == "" ? this.getCurrentDate("quarter") : nowseason;
      params.year = nowyear == "" ? this.getCurrentDate("year") : nowyear;
      params.month = nowmonth == "" ? this.getCurrentDate("month") : nowmonth;
      params.status = currentstatus == "" ? "1" : currentstatus;
      params.currentOrgId = currentOrgId;
      this.setState({ currentValue: params })
      this.onStyleChange("period", currentperiod)
    }
  }



  initValue = (type) => {
    let array = [];
    if (type == "month") {
      for (let i = 1; i <= 12; i++) {
        array.push({ label: monthdata[i], value: "" + i })
      }
    } else if (type == "quarter") {
      for (let i = 1; i <= 4; i++) {
        array.push({ label: seasondata[i], value: "" + i })
      }
    }
    return array;
  }

  /**
   * 选择值
   */
  onSelectChange = (key, value) => {
    let { onChange } = this.props;
    let { currentValue } = this.state;
    currentValue = { ...currentValue, [key]: value }
    this.onStyleChange(key, value)
    this.setState({ currentValue })
    if (typeof onChange === "function") {
      onChange(currentValue);
    }
  }

  /**
   * 样式改变
   */
  onStyleChange = (key, value) => {
    let { isShow, whiteWidth, currentValue } = this.state;
    if (key != "period") {
      return;
    } else {
      if (value == "1") {
        isShow.year = true;
        isShow.month = true;
        isShow.quarter = false;
        whiteWidth = "18%"
      } else if (value == "2") {
        isShow.year = true;
        isShow.month = false;
        isShow.quarter = true;
        whiteWidth = "18%"
      } else if (value == "3") {
        isShow.year = true;
        isShow.month = false;
        isShow.quarter = false;
        whiteWidth = "36%"
      } else {
        isShow.year = false;
        isShow.month = false;
        isShow.quarter = false;
        whiteWidth = "54%"
      }
    }
    this.setState({ isShow, whiteWidth })
  }

  /**
   * 获取当前的季度，月度
   */
  getCurrentDate = (type) => {
    let date = new Date();
    if (type == "year") {
      return "" + date.getFullYear();
    } else if (type == "quarter") {
      let month = date.getMonth() + 1;
      if (month >= 1 && month <= 3) {
        return "1";
      } else if (month >= 4 && month <= 6) {
        return "2";
      } else if (month >= 7 && month <= 9) {
        return "3";
      } else {
        return "4";
      }
    } else if (type == "month") {
      return "" + (date.getMonth() + 1)
    } else {
      return date.getDate();
    }

  }

  render() {
    let { showStatus, tailWidth, condtype, orgTypeList, currentOrgId } = this.props;
    let { period, status, quarter, month, whiteWidth, currentValue, isShow } = this.state;
    return (
      <div className="workrelate_mobile_goalLinkage">
        {(condtype == 2 || condtype == 8) && orgTypeList && orgTypeList.length > 0 && <div style={{ display: "inline-block", width: "2%" }}></div>}
        {(condtype == 2 || condtype == 8) && orgTypeList && orgTypeList.length > 0 && <ScrollSelect   //组织类型
          width={70}
          height={26}
          value={currentOrgId}
          title={getLabel(18214, '请选择')}
          bgcolor={"#fff"}
          data={orgTypeList}
          onChange={(value) => this.onSelectChange("currentOrgId", value)}
        />}
        <div style={{ display: "inline-block", width: "2%" }}></div>
        <ScrollSelect   //周期
          width={70}
          height={26}
          value={currentValue.period}
          title={getLabel(18214, '请选择')}
          bgcolor={"#fff"}
          data={period}
          onChange={(value) => this.onSelectChange("period", value)}
        />
        <div style={{ display: "inline-block", width: "2%" }}></div>
        <ScrollSelect  //年份
          width={70}
          height={26}
          value={currentValue.year}
          title={getLabel(18214, '请选择')}
          bgcolor={"#fff"}
          isDate={true}
          dateMode={"year"}
          isShow={isShow.year}
          onChange={(value) => this.onSelectChange("year", value)}
        >
        </ScrollSelect>
        <div style={{ display: "inline-block", width: "2%" }}> </div>
        <ScrollSelect  //季度
          width={70}
          height={26}
          value={currentValue.quarter}
          title={getLabel(18214, '请选择')}
          bgcolor={"#fff"}
          data={quarter}
          isShow={isShow.quarter}
          onChange={(value) => this.onSelectChange("quarter", value)}
        >
        </ScrollSelect>
        <ScrollSelect  //月度
          width={70}
          height={26}
          value={currentValue.month}
          title={getLabel(18214, '请选择')}
          bgcolor={"#fff"}
          data={month}
          isShow={isShow.month}
          onChange={(value) => this.onSelectChange("month", value)}
        >
        </ScrollSelect>

        {/* <div style={{display:"inline-block",width:`${tailWidth && tailWidth != "" ? tailWidth : whiteWidth}`}}> </div> */}
        <div style={{ display: "inline-block", float: "right", marginRight: "2%" }}>
          <ScrollSelect  //状态
            width={70}
            height={26}
            value={currentValue.status}
            title={getLabel(18214, '请选择')}
            bgcolor={"#fff"}
            data={status}
            isShow={showStatus}
            onChange={(value) => this.onSelectChange("status", value)}
          >
          </ScrollSelect>
        </div>
      </div>

    )
  }
}
export default GoalLinkage;